{extend name="public:base"}
{block name='css'}
<style>
    .ly-qrcode{position: absolute;top: 22.5%;left:15%;width: 70%;height:45%;}
    .ly-p1{font-size: 20px;font-weight: 700;margin: 0;color:#353535;}
    .ly-p4{font-size: 16px;margin: 0;color:#353535;}
    .ly-p2{font-size: 14px;margin: 5px auto 0 ;color:#fff;background: #66ba61;display: inline-block;padding: 3px 10px;border-radius: 20px;}
    .ly-p3{margin: 10px auto;}
    .ly-p3 img{width: 60%;}
</style>
{/block}

{block name='body'}
<div class="view view-main white-navbar white-toolbar">
    <div data-name="home" class="page">

        <div class="navbar">
            <div class="navbar-inner">
                <div class="left"><a href="{$my_prev_url|default='/'}" class="external"><i class="iconfont icon-fanhui"></i></a></div>
                <div class="center"><span>我要收款</span></div>
                <div class="right"></div>
            </div>
        </div>

        <div class="page-content padding-bottom50 js-page">

            <form name="form" action=""  method="post" id="form">

                <div class="chongzhi">
                    <span class="sp1">￥</span>
                    <input type="number" name="amount" placeholder="请输入收款金额..."/>
                </div>

                <div class="block">
                    <p class="row segmented-round">
                        <button class="col button button-big button-fill " style="background:#66ba61;">生成二维码</button>
                    </p>
                </div>
            </form>
        </div>

        <div class="page-content js-page" style="display: none;">
            <div class="tui" style="position: relative;">
                <img src="__PUBLIC__/img/a8.jpg" />
            </div>

        </div>


    </div>
</div>
{/block}

{block name="js"}
<script>
    var ajaxOn = false ;
    $().ready(function () {
        $("#form").validate({
            rules: {
                amount: {
                    required: true,
                    number:true ,
                    min:1
                }
            },
            messages: {
                amount: {
                    required: "请输入收款金额",
                    number: "请输入正确的金额",
                    min: "最少收款金额为1元"
                }
            },
            showErrors: function (errorMap, errorList) {
                $.each(errorList, function (i, v) {
                    messageToast( v.message );
                    return false;
                });
            },
            onfocusout: false,
            onsubmit : true ,
            onkeyup : false ,
            onclick : false ,
            focusInvalid:false,
            submitHandler:function(form){
                if (ajaxOn) {
                    return false ;
                }
                ajaxOn = true ;
                $.post("", $('#form').serialize(), function(data){
                    ajaxOn = false;
                    if (data.status == 'y') {
                        $('.tui img').attr('src', '/'+data.data+'?'+Math.random());
                        $('.js-page').eq(0).hide();
                        $('.js-page').eq(1).show();
                    } else {
                        messageToast(data.info);
                    }
                }, 'json');

                return false ;

            }
        });
    });
</script>
{/block}